<template>
  <div class="container">
    <div class="common-layout">
      <el-container>
        <el-aside class="container-aside">
          <!-- 练习室组件 -->
          <el-card class="box-card-lefttop">
            <el-collapse class="collapse-side" @change="handleChange">
              <el-collapse-item title="练习室">
                <router-link to="/practice"
                  ><div class="collapse-side-center">
                    我的练习室
                  </div></router-link
                >
              </el-collapse-item>
            </el-collapse>
          </el-card>
          <!-- 右侧信息 -->
          <div class="box-card-leftdown">
            <div class="box-card-leftdown-table">
              <router-link to="/center/MediaCache">
                <div class="box-card-leftdown-divone">缓存</div>
              </router-link>
              <div class="box-card-leftdown-divone" @click="open">音频库</div>
              <router-link to="/center/Collections">
                <div class="box-card-leftdown-divone">收藏</div>
              </router-link>
              <router-link to="/center/View_records">
                <div class="box-card-leftdown-divone">历史</div>
              </router-link>
            </div>
          </div>
        </el-aside>

        <div class="container-left-mainsiede">
          <el-main class="container-left-main">
            <div class="container-left-main-card-top">
              <div class="box-card-leftdown">
                <div
                  class="box-card-leftdown-divone" 
                  v-for="(every, index) in tabnames"
                  :key="index + 1"
                  @click="num = index"
                  :class="{ active: num == index }"
                  >{{ every.name }}</div>
              </div>
            </div>
            <el-card class="container-left-main-card-buttom">
              <div class="card-buttom-clicktab">
                <el-input disabled class="container-card-input"> </el-input>
                <el-button>搜索</el-button>
                <span>批量删除</span>
              </div>
              <div class="practiseAll" v-for="item in danceList" v-show="num == 0">
                <div class="partone">
                  <div class="partone-img">
                    <img
                    :src="item.momentBackup.cover"
                  />
                  </div>
                  <div class="partwo-name">
                  <h3>{{item.momentTitle}}</h3>
                  <span>当前播放0秒</span>
                </div>
                </div>
                <div class="practiseAll-timedelete">
                  <span class="practiseAll-time">昨天12:56</span>
                  <span class="practiseAll-delete">删除</span>
                </div>
                
                <!-- <div class="partthree">
                  <span class="partthreetime">13分钟前</span>
                  <span class="partthreedelete">删除</span>
                </div> -->
              </div>
              <div class="practiseCreate" v-show="num == 1">
                1
              </div>
              <div class="practiseJoin" v-show="num == 2">3</div>
            </el-card>
          </el-main>
        </div>
      </el-container>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Tabs from "./Tabs.vue";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { reqgetDanceInfo } from "@/api/parctice/parctice";

const handleChange = (val: string[]) => {
  console.log(val);
};
const open = () => {
  ElMessageBox.alert('请打开中舞网APP,点击"练习室"-"音频库"中查看', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: "确定",
  });
};

const num = ref<number>(0);
  const tabnames = [
    { type: "", name: "资源" },
    { type: "", name: "视频课" },
    { type: "", name: "直播课" },
  ];
  const danceList = ref<any>([]);
  const getDanceInfoList = async (pageNum:number,pageSize:number)=>{
    const result = await reqgetDanceInfo(pageNum,pageSize);
    console.log(result);
    console.log(result.content);
    danceList.value = result.content
    console.log(danceList.value);
  }

  // 在onMounted初始挂载
  onMounted(() => {
    getDanceInfoList(1,10)
  })
</script>
<style lang="less">
.container {
  .common-layout {
    width: 1200px;
    margin: 0 auto;
    .container-aside {
      width: 200px;
      .box-card-lefttop {
        width: 170px;
        margin-top: 20px;

        .collapse-side {
          border: 1px solid transparent;
          a {
            text-decoration: none;
          }
          .router-link-active {
            text-decoration: none;
          }
          .collapse-side-center {
            margin-left: 30px;
            color: #f93684;
          }
        }
      }
      .box-card-leftdown {
        box-shadow: 2px 2px 2px 1px rgba(183, 183, 183, 0.2);
        border: 1px solid #e7e8e9;
        margin-top: 10px;
        width: 170px;
        border-radius: 2%;
        background-color: #fff;
        a {
          text-decoration: none;
        }
        .router-link-active {
          text-decoration: none;
        }
        .box-card-leftdown-table {
          div {
            height: 15px;
            font-size: 14px;
            color: #111;
            padding: 17px 21px;
            cursor: pointer;
            position: relative;
            display: block;
            text-decoration: none;
            border-left: 5px solid transparent;
          }
          :hover {
            // box-sizing: border-box;
            border-left: 5px solid #f93684;
            transition: background-color 0.3s ease;
          }
        }
      }
    }
    .container-left-mainsiede {
      .container-left-main {
        width: 1020px;
        .container-left-main-card-top {
          display: flex;
          justify-content: space-between;
          box-shadow: 2px 2px 2px 1px rgba(183, 183, 183, 0.2);
          border: 1px solid #e7e8e9;
          height: 40px;
          border-radius: 2%;
          background-color: #fff;
          padding: 25px 30px 0;
          .box-card-leftdown {
            display: flex;
            div {
              width: 50px;
              height: 15px;
              font-size: 14px;
              text-align: center;
              color: #111;
              margin: 0px 10px;
              padding-bottom: 21px;
              cursor: pointer;
              position: relative;
              display: block;
              text-decoration: none;
              border-bottom: 5px solid transparent;
            }
            :hover {
              // box-sizing: border-box;
              border-bottom: 5px solid #f93684;
              transition: background-color 0.3s ease;
            }
          }
        }
        .demo-tabs > .el-tabs__content {
          padding: 32px;
          color: #6b778c;
          font-size: 14px;
          font-weight: 600;
        }
      }
      .container-left-main-card-buttom {
        height: 800px;
        margin-top: 20px;
        .card-buttom-clicktab {
          span{
            font-size: 15px;
            right: 0;
          }
          .container-card-input {
            width: 300px;
          }
          .container-card-buttom-div {
            height: 30px;
            margin-top: 10px;
            border-bottom: 1px solid #e1e1e1;
            p {
              font-size: 10px;
              color: #999;
              text-align: center;
            }
          }
        }
        .practiseAll {
              display: flex;
              justify-content: space-between;
              border-bottom: 1px solid #e1e1e1;
              margin-top: 20px;
              padding-bottom: 10px;
              .partone {
                display: flex;
                .partone-img{
                  img{
                    width: 180px;
                    border-radius: 5%
                  }
                }
                .partone-name{
                  margin: 10px;
                  margin-left: 10px;
                span {
                  margin-top: 20px;
                  font-size: 13px;
                  color: #7d8090;
                }
              }
              }
              .practiseAll-timedelete{
                .practiseAll-time{
                  margin: 0 10px;
                }
                .practiseAll-delete{
                  font-size: 10px;
                  color: #6b778c;
                }
              }
              .partthree {
                margin-top: 40px;
              }
            }
        button {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>

<!-- 去除lementUI组件的样式 -->
<style lang="less">
.el-collapse-item__header,
.el-collapse-item__wrap {
  border-bottom: 0px;
}
</style>
